<html>
<!-- 

Hello! This is largely stolen from:

http://src.chromium.org/viewvc/chrome/trunk/src/chrome/test/data/extensions/subscribe_page_action/options.html?revision=40354&view=markup

Which is the RSS extension example provided by Google. Here is their copyright notice:
 * Copyright (c) 2009 The Chromium Authors. All rights reserved.  Use of this
 * source code is governed by a BSD-style license that can be found in the
 * LICENSE file.

Except I can't find their license file.

-->

<head>
	<title>Limpet Options</title>
	<link rel="stylesheet" href="style.css" type="text/css" />
<style>
body, div, table, tr, th, td, ul, li, ol {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font: normal normal normal 14px/normal helvetica, verdana, tahoma, arial, 'sans serif';
}

body {
	display:-webkit-box;
	-webkit-box-orient:vertical;
	padding-top: 10px;
	background: #a00;
	margin-left: 50px;
}

h1, h2, h3 {
	color: white;
}

div.left {
	display: inline;
	float: left;
}

#dialogBackground {
	background-color: rgba(0, 0, 0, .2);
	display: none;
	height: 100%;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 1;
	-webkit-box-orient: vertical;
	-webkit-user-select:none;
}

#dialogHBackground {
	height: 100%;
	-webkit-box-orient: horizontal;
}

#dialog {
	background-color: #000;
	border: 1px solid #000;
	border-radius: 6px 6px;
	font-size: 12px;
	-webkit-box-orient: vertical;
}

#dialogHeader {
	color: #fff;
	margin-top: 2px;
	font-size: 16px;
}

#dialogBody {
	border-radius: 4px;
	background-color: rgb(240, 240, 240);
	border: 1px solid #000;
	margin: 2px 2px 2px 2px;
	padding: 10px;
	-webkit-box-orient: vertical;
}

#dialogBackground, #dialogBackground div {
	display: -webkit-box;
	-webkit-box-align: center;
}

#dialog input[type="text"] {
	width: 300px;
}

.dialogRow {
	width: 100%;
	-webkit-box-orient: horizontal;
	-webkit-box-pack: end;
}

.dialogRow>* {
	margin: 2px
}

#dialogContentFooter {
	margin-top: 20px;
}

.status {
	background-color: #FFF18A;
}

input {
	color: #000; 
	background-color: #fff; 
	border: 1px solid #000; 
}

button {
	color: #000; 
	background-color: #fff; 
	border: 1px solid #000; 
	border-radius: 6px;
	width: 100%;
	font-size: 14px;
	padding: 1px 9px 1px 9px;
}

div.dialogRow button {
	font-size: 16px;
	color: #fff;
	background: #000;
}

button[disabled] {
	color: #888;
}

div.dialogRow button[disabled] {
	color: #888;
}

</style>
<script type="text/javascript" src="common.js"></script>
<script>

  // Various text messages within the edit dialog.
  var assistText = chrome.i18n.getMessage("rss_subscription_feed_url_assist");

  // Specifies the index of the item we are editing or -1 if adding new.
  var editingIndex = -1;
  // Whether we are currently editing the default item.
  var editingDefault = false;

  // the list of sites
  var siteList;
  
function main() {
//  document.title = 
//      chrome.i18n.getMessage("rss_subscription_edit_dialog_title");

  // Make sure the dialog is not visible.
  document.getElementById('dialogBackground').style.display = "none";

  // Make sure the buttons are disabled to begin with.
  document.getElementById('editSite').disabled = true;
  document.getElementById('removeSite').disabled = true;

  if (!storageEnabled) {
    document.getElementById('addSite').disabled = true;
    document.getElementById('siteListbox').disabled = true;
    document.getElementById('resetList').disabled = true;

	alert("no storage enabled");
//    alert(chrome.i18n.getMessage("rss_subscription_no_localstorage"));
    return;
  }

  if (window.localStorage.limpetSiteList) {
    siteList = JSON.parse(window.localStorage.limpetSiteList);
  } else {
    siteList = defaultLimpetSiteList();
    window.localStorage.limpetSiteList = JSON.stringify(siteList);
  }

  // Populate the list of sites.
  var siteListbox = document.getElementById('siteListbox');
  while (siteListbox.options.length > 0)
    siteListbox.remove(0);
  for (i = 0; i < siteList.length; ++i) {
    siteListbox.add(new Option(siteList[i].name, siteList[i].name));
  }
}

function resetList() {
  if (!confirm(chrome.i18n.getMessage(
         "rss_subscription_reset_list_confirm"))) {
    return;
  }

  delete window.localStorage.limpetSiteList;

  // Reinititalize the page.
  main();
}

function onSelectionChanged() {
  var selected = siteListbox.selectedIndex > -1;
  // To edit a site something must be selected.
  document.getElementById('editSite').disabled = !selected;
  // To remove the selected site it must not be the last item.
  document.getElementById('removeSite').disabled = !selected;
}

function populateDialog(siteConfig) {
	if (siteConfig) {
		document.getElementById('site_name').value = siteConfig.name;
		document.getElementById('site_url').value = siteConfig.url;
		document.getElementById('site_key').value = siteConfig.key;
		document.getElementById('site_cookie_name').value = siteConfig.cookieName;
	} else {
		document.getElementById('site_name').value = "";
		document.getElementById('site_url').value = "";
		document.getElementById('site_key').value = "";
		document.getElementById('site_cookie_name').value = "";
	}
}

function getSiteFromDialog() {
	return {
		name: document.getElementById('site_name').value,
		url: document.getElementById('site_url').value,
		key: document.getElementById('site_key').value,
		cookieName: document.getElementById('site_cookie_name').value
	};
}

function editSite(index) {
  var siteListbox = document.getElementById('siteListbox');

  if (index == -1) {
    // Adding a new item, make sure the text boxes are empty.
	populateDialog(null);
    editingIndex = -1;  // New item.
    editingDefault = true;  // New items become default items.
  } else if (index == 0) {
    // Editing some item, find the current item index and store it.
    editingIndex = siteListbox.selectedIndex;
	var site = siteList[siteListbox.selectedIndex];
	populateDialog(site);
  }

  showDialog();
}

function removeSite() {
  var index = siteListbox.selectedIndex;
  var siteList = JSON.parse(window.localStorage.limpetSiteList);
  var reply =
    confirm(chrome.i18n.getMessage("rss_subscription_remove_confirm",
                                   siteList[index].name));
  if (reply) {
    siteList.splice(index, 1);
    window.localStorage.limpetSiteList = JSON.stringify(siteList);
  }

  main();
}

/**
* Shows the edit site dialog.
*/
function showDialog() {
  document.getElementById('site_save').disabled = true;

  // Show the dialog box.
  document.getElementById('dialogBackground').style.display = "-webkit-box";
  
  validateInput();
}

/**
* Hides the Edit Feed Site dialog.
*/
function hideDialog() {
  document.getElementById('dialogBackground').style.display = "none";
}

/**
* Validates the input in the form (making sure something is entered in both
* fields and that %s is not missing from the url field.
*/
function validateInput() {
  document.getElementById('statusMsg').innerText = "";

  var site = getSiteFromDialog();

  var valid = site.name.length > 0 &&
                site.url.length > 0 &&
                site.key.length > 0 &&
				site.cookieName.length > 0;

  document.getElementById('site_save').disabled = !valid;
}

/**
* Handler for saving the values.
*/
function save() {
  console.log("saving...");

  // Get the old list.
  var site = getSiteFromDialog();

  if (editingIndex == -1) {
	console.log("saving new");

    // Construct a new list.
    var newSiteList = [];

    for (i = 0; i < siteList.length; ++i)
      newSiteList.push(siteList[i]);

    // Add the new item.
    newSiteList.push(site);

    siteList = newSiteList;
  } else {
    siteList[editingIndex] = getSiteFromDialog();
  }

	console.log("storage");
  window.localStorage.limpetSiteList = JSON.stringify(siteList);
  	console.log("sendRequest");

  chrome.extension.sendRequest(
    { 
	  command: "update", 
	  options: {
	    "siteList": siteList
	  }
	}, 
	function(x) { console.log(x); });

  hideDialog();

  // Reload the values from scratch.
  main();
}

function init() {
//  i18nReplace('rss_subscription_options');
//  i18nReplaceImpl('addSite', 'rss_subscription_add_site');
//  i18nReplaceImpl('editSite', 'rss_subscription_edit_site');
//  i18nReplaceImpl('removeSite', 'rss_subscription_remove_site');
//  i18nReplaceImpl('resetList', 'rss_subscription_reset_list');
//  i18nReplace('rss_subscription_always_use_default');
//  i18nReplaceImpl('dialogHeader', 'rss_subscription_edit_dialog_title');
//  i18nReplace('rss_subscription_feed_description');
//  i18nReplace('rss_subscription_feed_url');
//  i18nReplaceImpl('save', 'rss_subscription_save_button', 'value');
//  i18nReplaceImpl('rss_subscription_close_button',
//                  'rss_subscription_close_button', 'value');
  main();
}
</script>
</head>
<body onload="init()">
  <h2>Limpet Extension Options</h2>

  <div>
  <div class="left" style="padding-right: 10px;">
    <select id="siteListbox" size="8" style="width:300;"
            onchange="onSelectionChanged()"></select>
  </div>
  <div class="left">
    <button id="addSite" onclick="editSite(-1)">Add</button><br />
    <button id="editSite" onclick="editSite(0)">Edit</button><br />
    <button id="removeSite" onclick="removeSite()">Remove</button><br />
    <button id="resetList" onclick="resetList()">Reset</button><br />
  </div>
  </div>
  
  <div id="dialogBackground">
    <div id="dialogHBackground">
      <div id="dialog">

        <div id="dialogHeader">Site options</div>

        <div id="dialogBody">

          <div class="dialogRow">
            &nbsp;<div class="status" id="statusMsg"></div>
          </div>

          <div class="dialogRow">
            <div id="opt_site_name">Name</div>
            <div>
              <input type="text" id="site_name" onkeyup="validateInput()">
            </div>
          </div>

          <div class="dialogRow">
            <div id="opt_site_url">Base URL (regex)</div>
            <div>
              <input type="text" id="site_url" onkeyup="validateInput()">
            </div>
          </div>

          <div class="dialogRow">
            <div id="opt_site_cookie_name">Cookie Name</div>
            <div>
              <input type="text" id="site_cookie_name" onkeyup="validateInput()">
            </div>
          </div>

          <div class="dialogRow">
            <div id="opt_site_url">Encryption key</div>
            <div>
              <input type="text" id="site_key" onkeyup="validateInput()">
            </div>
          </div>

          <div class="dialogRow" id="dialogContentFooter">
            <div>
				<button id="site_save" onclick="save()">
					Save
				</button>
            </div>
            <div>
				<button id="site_close"
					 onclick="hideDialog()">
					Close
				</button>
            </div>
          </div>

        </div> <!-- /dialogBody -->

      </div>
    </div>
  </div>

</body>
</html>
